<template>
  <div style="padding: 12px 10px">
    <div>
      <div>
        <el-input
          class="input"
          clearable
          v-model="name"
          placeholder="姓名"
        ></el-input>
        <div style="padding: 6px"></div>
        <el-input
          class="input"
          clearable
          v-model="phone"
          placeholder="电话"
        ></el-input>
      </div>
      <div class="header flex">
        <el-button @click="cha()">查询</el-button>
        <el-button @click="clear()">重置</el-button>
        <!-- 弹框  新增-->
        <el-popover placement="top" width="560" v-model="visible">
          <p>
            <!-- 弹出框的内容 -->
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="候选人姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item label="候选人电话" prop="phone">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
              <!-- <el-form-item label="面试时间" prop="interviewDate">
                <el-input v-model="ruleForm.interviewDate"></el-input>
              </el-form-item> -->
              <el-form-item label="面试时间" prop="interviewDate">
                <el-date-picker
                  v-model="ruleForm.interviewDate"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="面试官" prop="interviewer">
                <el-select v-model="ruleForm.interviewer" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="面试结果" prop="result">
                <el-radio-group v-model="ruleForm.result">
                  <el-radio v-model="ruleForm.result" label="进行中"></el-radio>
                  <!-- <el-radio v-model="ruleForm.result" label="未通过"></el-radio> -->
                </el-radio-group>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitForm(ruleForm)"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">重置</el-button>
              </el-form-item>
            </el-form>
          </p>
          <div style="text-align: right; margin: 0">
            <el-button size="mini" type="text" @click="visible = false"
              >取消</el-button
            >
            <el-button type="primary" size="mini" @click="visible = false"
              >确定</el-button
            >
          </div>
          <!-- 新增按钮 -->
          <el-button type="primary" slot="reference">新增</el-button>
        </el-popover>
      </div>
      <!-- 下面表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <!-- 点击按钮 -->
        <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
        <!-- 需求人数 -->
        <el-table-column label="候选人姓名" width="170">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column
          prop="phone"
          label="候选人电话"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="interviewDate"
          label="面试时间"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="面试官" width="200">
          <template slot-scope="scope">{{ scope.row.interviewer }}</template>
        </el-table-column>
        <el-table-column
          prop="result"
          label="面试结果"
          width="200"
        ></el-table-column>

        <el-table-column label="创建时间" width="200">
          <template slot-scope="scope">{{ scope.row.createDate }}</template>
        </el-table-column>

        <el-table-column width="200" label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="parAdd(scope.$index, scope.row)"
              >更改面试结果</el-button >
              <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button >
          </template>
        </el-table-column>
      </el-table>
    </div>
  <!-- 修改内容 -->
  <el-dialog title="修改面试结果" :visible.sync="dialogVisible2" width="50%">
      <!-- 表单 -->
      <el-form
        :model="form2"
        ref="form"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="需求状态" prop="result">
          <el-radio-group v-model="form2.result">
            <el-radio label="通过"></el-radio>
            <el-radio label="未通过"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="handleClose2(form2)">确 定</el-button>
      </span>
    </el-dialog>
    <Pagin :count="total" @pageEvent="fetchData" :pageSize="pageSize"></Pagin>
  </div>
</template>

<script>
import {
  InterInfo,
  Addmians,
  gengListAPI,
  DeleteAPI,
  souchaListApi,
  chaListApi,
} from "@/api/3-2_Interview";
export default {
  data() {
    return {
      value: "",
      options: [],
      dialogVisible2: false, //编辑
      form2: {},
      name: "", //查询 姓名
      phone: "", //查询 姓名
      ruleForm: {
        name: "",
        phone: "",
        interviewDate: "",
        interviewer: "",
        result: [],
        createDate: "",
        date: "",
      },
      total: 0, // 列表总行数
      pageSize: 10,
      currentPage: 1,
      rules: {},
      visible: false,
      tableData: [],
      dataList: [],
      multipleSelection: [],
    };
  },
  created() {
    this.inits(); //页面一刷新就获取页面的数据，并渲染该页面
    // this.cha();//查询
    this.guans(); //面试官
  },
  components: {
    Pagin: () => import("c/Pagin"),
  },
  mounted() {},
  methods: {
    // 修改的弹框
    parAdd(index, row) {
      this.dialogVisible2 = true;
      this.form2 = row;
    },

    //删除
    async handleDelete(index, row) {
      const res = await DeleteAPI(row.id);
      this.dataList.splice(index, 1);
      this.fetchData(this.currentPage);
      this.total = this.dataList.length;
      this.$message.success("删除成功");
    },
    // 请求数据渲染页面
    async inits() {
      var res = await InterInfo();
      this.dataList = res.data;
      this.total = this.dataList.length;
      this.fetchData(this.currentPage);
    },
    //分页
    fetchData(count) {
      var list = this.dataList;
      var from = (count - 1) * this.pageSize;
      const to = count * this.pageSize;
      this.tableData = [];
      for (; from < to; from++) {
        if (list[from]) {
          this.tableData.push(list[from]);
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 面试官
    async guans() {
      // mock
      // var r = await chaListApi();
      // r.data.map((item,i)=>{
      //   item.value = item.name
      // })
      // this.options = r.name
      // console.log("面试官", r.name);
      // console.log('数组',this.options);
      // 接口
      var r = await chaListApi();
      r.data.forEach((item) => {
        // this.options.push({name:item.name,value:item.value});
        var obj = { value: item, name: item };
        this.options.push(obj);
      });
    },
    async handleClose2() {
      const res = await gengListAPI({
        id: this.form2.id,
        result: this.form2.result });
      if (res.code == "1") {
        this.inits()
        this.$message.success("修改成功");
      }
      this.dialogVisible2 = false;
    },
    // 添加数据
    async submitForm(form) {
      var res = await Addmians({
        name: form.name,
        phone: form.phone,
        interviewDate: form.interviewDate,
        interviewer: form.interviewer,
        result: form.result,
        // createDate: form.createDate,
      });
      if (res.code == "1") {
        // var obj = {
          // name: form.name,
          // phone: form.phone,
          // interviewDate: form.interviewDate,
          // interviewer: form.interviewer,
          // result: form.result,
          // createDate: form.createDate,
        // };
         // this.dataList.unshift(obj);
        // console.log(this.dataList, "k");
        // this.fetchData(this.currentPage);
        // this.total = this.dataList.length;
        this.visible = false;
        this.inits()
        this.$message.success("添加成功");

      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 查询
    async cha() {
      var res = await souchaListApi({
        name: this.name,
        phone: this.phone,
      });
      var cartInfo = [];
      if (res.code == "1") {
        res.data.map((item, i) => {
          console.log(item, i);
          if (item.name == this.name || item.phone == this.phone) {
            // return item
            cartInfo.push(item);
          }
        });
        //   this.dataList = res.data;
        this.dataList = cartInfo;
        this.total = this.dataList.length;
        this.fetchData(this.currentPage);
      } else {
        alert("未查询到结果！请检查接口");
      }
    },
    clear() {
      this.name = "";
      this.phone = "";
      this.inits();
    },
  },
};

</script>
<style scoped lang="scss">
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input {
  width: 420px;
}
.header {
  width: 22%;
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0;
  
}
</style>
